<template>
  <div class="content">
    <div class="addInfo">
      <div class="uesrInput">
        <label>拼团名称</label>
        <input
          v-model="form.groupName"
          class="inputK"
          mode="wrapped"
          maxlength="999999"
        />
        <img
          class="oneIocn"
          src="https://akk.028wkf.cn/kdb-weapp-img/icon/xzlm.png"
          mode="scaleToFill"
        />
      </div>
      <div>
        <label for="teamNum">成团人数</label>
        <input
          v-model="form.customerNum"
          id="teamNum"
          class="inputK"
          type="number"
          mode="wrapped"
          placeholder="成团人数最少两人"
          maxlength="999999"
        />
        <label class="teamNumHint" id="teamNum">人</label>
      </div>
      <!-- 开始时间 -->
      <div class="layout1Div">
        <label>开始日期</label>
        <SelectDatePicker @change="dateChangeStart" v-bind:date="startDate" />
        <img src="https://akk.028wkf.cn/kdb-weapp-img/icon/xzlm.png" mode="scaleToFill" />
      </div>
      <div class="layout1Div">
        <label>开始时间</label>
        <SelectTimePicker @change="timeChangeStart" v-bind:date="startTime" />
        <img src="https://akk.028wkf.cn/kdb-weapp-img/icon/xzlm.png" mode="scaleToFill" />
      </div>
      <!-- 结束时间 -->
      <div class="layout1Div">
        <label>结束日期</label>
        <SelectDatePicker @change="dateChangeEnd" v-bind:date="endDate" />
        <img src="https://akk.028wkf.cn/kdb-weapp-img/icon/xzlm.png" mode="scaleToFill" />
      </div>
      <div class="layout1Div">
        <label>结束时间</label>
        <SelectTimePicker @change="timeChangeEnd" v-bind:date="endTime" />
        <img src="https://akk.028wkf.cn/kdb-weapp-img/icon/xzlm.png" mode="scaleToFill" />
      </div>
      <!-- 成团有效效时间 -->
      <div class="uesrInputBottom">
        <label>成团有效时间</label>
        <input
          v-model="form.validTime"
          class="inputK inputT"
          mode="wrapped"
          maxlength="999999"
        />
        <label class="teamNumHint">小时</label>
      </div>
    </div>
    <div class="addNum">
      <div class="uesrInput">
        <label>拼团状态</label>
        <i-switch :value="switch1" @change="onChange" slot="footer"></i-switch>
      </div>
      <div>
        <label for="purchase">每人限购数量</label>
        <input
          v-model="form.goodsNum"
          id="purchase"
          class="inputK"
          type="number"
          mode="wrapped"
          maxlength="999999"
        />
        <img src="https://akk.028wkf.cn/kdb-weapp-img/icon/xzlm.png" mode="scaleToFill" />
      </div>
    </div>
    <!-- 关联商品和第一个被关联的商品 -->
    <div class="associated">
      <div class="associatedTitle">
        <label>关联商品</label>
        <div @click="associatedLink">
          <img src="https://akk.028wkf.cn/kdb-weapp-img/img/tjgg.png" mode="scaleToFill" />
        </div>
      </div>
      <div class="addShopListBox" v-if="testList && testList.length">
        <div class="shopListInfo">
          <img :src="testList[0].goodsImg" mode="scaleToFill" />
          <div>
            <span>{{testList[0].goodsName}}</span>
            <label>￥{{testList[0].goodsAmount}}</label>
          </div>
          <p>库存：{{testList[0].goodsStock}}</p>
        </div>
        <div class="shopListInput">
          <label>拼团价格</label>
          <span>￥</span>
          <input
            class="inputK"
            type="digit"
            mode="wrapped"
            maxlength="999999"
            v-model="testList[0].goodsGroupAmount"
            @change="shopsMoneyChang($event)"
          />
        </div>
        <div
          class="isSpecification"
          @click="setSpecificationClick(testList[0])"
          v-if="testList[0].specificationIS"
        >
          <span>规格</span>
        </div>
        <div
          class="isSpecification isNoSpecification"
          v-if="!testList[0].specificationIS"
          @click="noTitleClick"
        >
          <span>无规格</span>
        </div>
      </div>
    </div>
    <!-- 如果有更多关联商品 -->
    <div v-if="testList && testList.length > 1">
      <div
        class="inAddShopListBox"
        v-for="(itme,index) in testList"
        :key="index"
        v-show="index >= 1"
      >
        <div class="addShopListBox">
          <div class="shopListInfo">
            <img :src="itme.goodsImg" mode="scaleToFill" />
            <div>
              <span>{{itme.goodsName}}</span>
              <label>￥{{itme.goodsAmount}}</label>
            </div>
            <p>库存：{{itme.goodsStock}}</p>
          </div>
          <div class="shopListInput">
            <label>拼团价格</label>
            <span>￥</span>
            <input
              class="inputK"
              type="digit"
              mode="wrapped"
              maxlength="999999"
              v-model="itme.goodsGroupAmount"
              @change="shopsMoneyChang($event)"
            />
          </div>
          <div
            class="isSpecification"
            @click="setSpecificationClick(itme)"
            v-if="itme.specificationIS"
          >
            <span>规格</span>
          </div>
          <div
            class="isSpecification isNoSpecification"
            v-if="!itme.specificationIS"
            @click="noTitleClick"
          >
            <span>无规格</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 规格弹窗 -->
    <div class="showSpecification" v-if="isShowSpecification">
      <div class="box">
        <p class="title">设置规格</p>
        <div
          class="list"
          v-for="(item,index) in thisGroupGoodsList"
          :key="index"
        >
          <p>名称：{{item.goodsSpecName}}</p>
          <p>原价：{{item.goodsSpecAmount}}</p>
          <p>折扣价：{{item.goodsSpecDiscount}}</p>
          <p>
            规格价格：
            <input
              v-model="item.goodsGroupAmount"
              class="input"
              mode="wrapped"
              maxlength="999999"
            />
          </p>
        </div>
        <div class="btnBox">
          <button class="cancel" @click="cancelClcik">取消</button>
          <button class="verify" @click="confirmClick">确定</button>
        </div>
      </div>
      <div class="zz"></div>
    </div>
    <div class="okBtn">
      <button
        class="handleClick"
        @click="handleClick"
        type="primary"
        shape="circle"
        size="small"
        v-if="!isUpdate"
      >完成新增</button>
      <button
        class="handleClick"
        @click="updataClick"
        type="primary"
        shape="circle"
        size="small"
        v-else
      >完成编辑</button>
    </div>
  </div>
</template>

<script>
import SelectDatePicker from '@/components/SelectDatePicker'
import SelectTimePicker from '@/components/SelectTimePicker'

import {
  ADD_GROUP_API,
  FIND_GROUP_INFO_API,
  UPDATE_GROUP_API,
  FIND_SHOP_GOODS_SPECIFICATION_LIST
} from '@/api'

export default {
  components: { SelectDatePicker, SelectTimePicker },
  data () {
    return {
      form: {
        goodsList: []
      },
      startDate: '',
      startTime: '',
      endDate: '',
      endTime: '',
      switch1: true,
      isUpdate: false,
      returnItem: [],
      isShowSpecification: false, // 设置规格的弹窗
      thisGroupGoodsList: []
    }
  },

  onUnload () {
    const vm = this
    vm.$cookie.remove('isGroupUpdata')
    vm.$cookie.remove('groupUpdataList')
    vm.$cookie.remove('isLink')
    vm.thisGroupGoodsList = []
  },
  created () {},
  computed: {
    account () {
      return this.$cookie.get('account')
    },
    testList () {
      return this.form.goodsList
    }
    // isGroupUpdata () {
    //   return this.$cookie.get('isGroupUpdata')
    // }
  },
  onShow () {
    this.getObjInfo()
  },
  methods: {
    dateChangeStart (val) {
      const vm = this
      vm.startDate = val
      if (!vm.startTime) {
        vm.startTime = '00:00:00'
      }
    },
    timeChangeStart (val) {
      const vm = this
      vm.startTime = val + ':00'
    },
    dateChangeEnd (val) {
      const vm = this
      vm.endDate = val
      if (!vm.endTime) {
        vm.endTime = '00:00:00'
      }
    },
    timeChangeEnd (val) {
      const vm = this
      vm.endTime = val + ':00'
    },
    noTitleClick () {
      this.$toast('该商品暂无规格')
    },
    setSpecificationClick (val) {
      const vm = this
      if (val.groupGoodsSpecList && val.groupGoodsSpecList.length) {
        vm.isShowSpecification = true
        vm.thisGroupGoodsList = val.groupGoodsSpecList
      } else {
        vm.$toast('此商品无规格')
      }
    }, // 规格按钮
    cancelClcik () {
      const vm = this
      vm.thisGroupGoodsList = []
      vm.isShowSpecification = false
    },
    confirmClick () {
      const vm = this
      vm.isShowSpecification = false
    }, // 规格弹窗确定按钮
    onChange (e) {
      const vm = this
      vm.switch1 = e.mp.detail.value
    }, // 是否限购
    associatedLink () {
      const vm = this
      // let isGroupUpdata = vm.$cookie.get('isGroupUpdata')
      vm.$cookie.remove('isLink')
      let goodsList = JSON.stringify(vm.form.goodsList)
      vm.$router.push(
        '/pages/home/group/new-group-booking-shops/main?goodsList=' + goodsList
      )
    }, // 关联商品链接
    shopsMoneyChang (e) {
      console.info(e)
    }, // 商品价格
    handleClick () {
      const vm = this
      vm._addGroupApi()
    }, // 新增按钮
    updataClick () {
      const vm = this
      vm._updateGroupApi()
    }, // 编辑按钮
    _updateGroupApi () {
      const vm = this
      let params = { ...vm.form }
      params.state = vm.switch1 ? '0' : '1'
      params.startDate = vm.startDate + ' ' + vm.startTime
      params.endDate = vm.endDate + ' ' + vm.endTime
      params.groupGoodsList = vm.form.goodsList

      if (vm.returnItem.length > 0) {
        for (let i = 0; i < vm.returnItem.length; i++) {
          params.groupGoodsList.push(vm.returnItem[i])
        }
      }

      UPDATE_GROUP_API(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('编辑成功', '').then(() => {
              vm.thisGroupGoodsList = []
              vm.isShowSpecification = false
              vm.$router.go(-1)
              // vm.$router.replace('/pages/home/group/index/main')
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 编辑
    _addGroupApi () {
      const vm = this
      let params = { ...vm.form }
      params.shopId = vm.account.shopId
      params.state = vm.switch1 ? '0' : '1'
      params.startDate = vm.startDate + ' ' + vm.startTime
      params.endDate = vm.endDate + ' ' + vm.endTime
      params.groupGoodsList = vm.form.goodsList

      ADD_GROUP_API(params)
        .then(r => {
          if (r.data.code === '0' && r.data.data) {
            vm.$alert('添加成功', '').then(() => {
              vm.thisGroupGoodsList = []
              vm.isShowSpecification = false
              vm.$router.go(-1)
              // vm.$router.replace('/pages/home/group/index/main')
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 新增拼团
    getObjInfo () {
      const vm = this
      let isGroupUpdata = vm.$cookie.get('isGroupUpdata')
      if (isGroupUpdata) {
        let jsonString = vm.$root.$mp.query.itemObj
        let obj = JSON.parse(jsonString)
        vm._findGroupInfo(obj.shopId, obj.groupId)
        vm.isUpdate = true
      } else {
        // 如果是新增
        if (vm.$cookie.get('isLink')) {
          vm.form = {
            goodsList: []
          }
          vm.startDate = ''
          vm.endDate = ''
          vm.startTime = ''
          vm.endTime = ''
        }

        vm.findGroupLise()
        vm.isUpdate = false
      }
    }, // 判断是否为新增

    _findGroupInfo (shopId, groupId) {
      const vm = this
      FIND_GROUP_INFO_API(shopId, groupId)
        .then(r => {
          if (r.data.code === '0') {
            let obj = r.data.data
            vm.form = obj
            vm.form.goodsList = vm.form.goodsList.map(_ => ({
              ..._,
              specificationIS: false
            }))
            vm.endDate = obj.endDate.split(' ')[0]
            vm.endTime = obj.endDate.split(' ')[1]
            vm.startDate = obj.startDate.split(' ')[0]
            vm.startTime = obj.startDate.split(' ')[1]
            // 如果cookie里面存的有的话，就赋值过来
            vm.findGroupLise()
            if (obj.state === '0') {
              vm.switch1 = true
            } else {
              vm.switch1 = false
            }
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 查询拼团详情

    _getGoodsSpecInfo (goodsNo) {
      const vm = this
      FIND_SHOP_GOODS_SPECIFICATION_LIST(goodsNo)
        .then(r => {
          if (r.data.code === '0') {
            let list = r.data.data
            if (list.length) {
              vm.form.goodsList.forEach(_ => {
                if (_.goodsNo === goodsNo) {
                  _.groupGoodsSpecList = list
                  _.specificationIS = true
                }
              })
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }, // 获取产品规格
    findGroupLise () {
      const vm = this
      if (vm.$cookie.get('groupUpdataList')) {
        // 编辑的时候的关联产品
        let item = JSON.parse(vm.$cookie.get('groupUpdataList'))
        vm.form.goodsList = item.map(_ => ({
          ..._,
          specificationIS: false
        }))
        if (vm.form.goodsList.length) {
          vm.form.goodsList.forEach(_ => {
            if (_.goodsNo) {
              // _.specificationIS = true
              vm._getGoodsSpecInfo(_.goodsNo)
            }
          })
        }
      } else {
        // 已进入的初始状态
        if (vm.form.goodsList.length) {
          vm.form.goodsList.forEach(_ => {
            if (_.goodsNo) {
              // _.specificationIS = true
              vm._getGoodsSpecInfo(_.goodsNo)
            }
          })
        }
      }
    } // 存在storage的规格信息
  }
}
</script>

<style lang="scss">
@import 'static/styles/color.scss';

.content {
  width: 350px;
  margin: auto;
  .addInfo {
    width: calc(100% - 20px);
    margin: 10px auto;
    min-height: 250;
    box-shadow: 0 0 8px lighten($blue, 20%);
    transform: translateY(10px);
    .uesrInput {
      padding-top: 30px !important;
    }
    .uesrInputBottom {
      padding-bottom: 10px !important;
    }
    .layout1Div {
      input {
        width: 180px;
        font-size: 12px;
        background: #edf0f5;
        border-radius: 5px;
        margin: 0;
        padding: 2px 30px 2px 15px;
        border: 1px solid #e0e1e3;
        font-size: 14px;
        height: 40px;
      }
    }
    div {
      width: 300px;
      margin: auto;
      padding-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      // font-size: 12px;
      label {
        font-size: 12px;
        color: #000;
      }
      .inputK {
        width: 180px;
        background: #edf0f5;
        border-radius: 5px;
        margin: 0;
        padding: 2px 30px 2px 15px;
        border: 1px solid #e0e1e3;
        font-size: 14px;
        height: 40px;
      }
      .inputT {
        width: 150px;
      }
      .teamNumHint {
        position: absolute;
        right: 10px;
      }
      img {
        width: 5px;
        height: 10px;
        position: absolute;
        right: 10px;
        top: 50%;
        z-index: 1;
      }
      .oneIocn {
        top: 63%;
      }
    }
  }
  .addNum {
    width: 100%;
    margin: auto;
    min-height: 125px;
    box-shadow: 0 0 8px lighten($blue, 20%);
    transform: translateY(10px);
    .uesrInput {
      padding-top: 30px !important;
    }
    div {
      width: 300px;
      margin: auto;
      padding-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      label {
        font-size: 12px;
        color: #000;
      }
      .inputK {
        width: 150px;
        font-size: 12px;
        background: #edf0f5;
        border-radius: 5px;
        margin: 0;
        padding: 2px 30px 2px 15px;
        border: 1px solid #e0e1e3;
        font-size: 14px;
        height: 40px;
      }
      img {
        width: 5px;
        height: 10px;
        position: absolute;
        right: 10px;
        top: 50%;
        z-index: 1;
      }
    }
  }
  .associated {
    margin: 10px auto;
    min-height: 75px;
    box-shadow: 0 0 8px lighten($blue, 20%);
    transform: translateY(10px);
    .associatedTitle {
      width: 300px;
      // height: 75px;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 40px 0 10px !important;
      label {
        font-size: 12px;
        color: #000;
      }
      div {
        padding: 5px;
        img {
          width: 20px;
          height: 20px;
          position: static;
        }
      }
    }
    .addShopListBox {
      width: 300px;
      min-height: 130px;
      padding-bottom: 40px;
      margin: auto;
      .shopListInfo {
        width: 300px;
        height: 50px;
        margin: auto;
        display: flex;
        align-items: flex-end;
        img {
          width: 50px;
          height: 50px;
          position: static;
        }
        div {
          width: 140px;
          height: 50px;
          margin-left: 20px;
          font-size: 14px;
          line-height: 14px;
          display: flex;
          flex-direction: column;
          // justify-content: center;
          span {
            width: 140px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #000;
            display: block;
            margin-bottom: 10px;
          }
          label {
            color: #e51c23;
          }
        }
        p {
          font-size: 14px;
          line-height: 14px;
          color: #000;
        }
      }
      .shopListInput {
        margin-top: 10px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        label {
          font-size: 12px;
          color: #000;
        }
        span {
          position: absolute;
          left: 40%;
          z-index: 1;
        }
        .inputK {
          width: 130px;
          font-size: 12px;
          background: #edf0f5;
          border-radius: 5px;
          margin: 0;
          padding: 2px 30px 2px 35px;
          border: 1px solid #e0e1e3;
          color: #000;
          font-size: 14px;
          height: 40px;
        }
      }
      .isSpecification {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-top: 30px;
        span {
          font-size: 14px;
          padding: 5px 15px;
          background: #508ff9;
          color: #fff;
          border-radius: 5px;
        }
      }
      .isNoSpecification {
        span {
          background: #606266;
        }
      }
    }
  }
  .inAddShopListBox {
    min-height: 225px;
    height: auto;
    margin: 5px auto;
    box-shadow: 0 0 8px lighten($blue, 20%);
    transform: translateY(10px);
    .addShopListBox {
      width: 300px;
      height: 100px;
      padding: 40px 0 30px 0;
      margin: auto;
      .shopListInfo {
        width: 300px;
        height: 50px;
        margin: auto;
        display: flex;
        align-items: flex-end;
        img {
          width: 50px;
          height: 50px;
          position: static;
        }
        div {
          width: 140px;
          height: 50px;
          margin-left: 20px;
          font-size: 14px;
          line-height: 14px;
          display: flex;
          flex-direction: column;
          // justify-content: center;
          span {
            width: 140px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #000;
            display: block;
            margin-bottom: 10px;
          }
          label {
            color: #e51c23;
          }
        }
        p {
          font-size: 14px;
          line-height: 14px;
          color: #000;
        }
      }
      .shopListInput {
        margin-top: 10px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        label {
          font-size: 12px;
          color: #000;
        }
        span {
          position: absolute;
          left: 40%;
          z-index: 1;
        }
        .inputK {
          width: 130px;
          font-size: 12px;
          background: #edf0f5;
          border-radius: 5px;
          margin: 0;
          padding: 2px 30px 2px 35px;
          border: 1px solid #e0e1e3;
          color: #000;
          font-size: 14px;
          height: 40px;
        }
      }
      .isSpecification {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        margin-top: 30px;
        span {
          font-size: 14px;
          padding: 5px 15px;
          background: #508ff9;
          color: #fff;
          border-radius: 5px;
        }
      }
      .isNoSpecification {
        span {
          background: #606266;
        }
      }
    }
  }
  .okBtn {
    margin-top: 30px;
    .handleClick {
      text-align: center;
      vertical-align: middle;
      touch-action: manipulation;
      cursor: pointer;
      background-image: none;
      white-space: nowrap;
      user-select: none;
      font-size: 14px;
      border-radius: 2px;
      border: 0 !important;
      position: relative;
      text-decoration: none;
      height: 44px;
      line-height: 44px;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
      color: #fff !important;
      margin: 10px;
      background: #508ff9;
    }
  }
  .showSpecification {
    width: 100%;
    .box {
      width: 90%;
      min-height: 50px;
      position: fixed;
      z-index: 3;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      .title {
        font-size: 14px;
        text-align: center;
        line-height: 40px;
      }
      .list {
        padding: 0 5px;
        border: 1px solid #dad5d5;
        display: flex;
        flex-direction: column;
        justify-content: center;
        p {
          font-size: 12px;
          color: #000;
          display: flex;
          align-items: center;
          line-height: 20px;
          .input {
            background: #edf0f5;
            font-size: 12px;
            border: 1px solid #e0e1e3;
            margin: 0;
            padding: 0 2px;
            border-radius: 4px;
          }
        }
      }
      .btnBox {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        padding-bottom: 15px;
        .cancel {
          background: #e0e1e3;
          color: #000;
        }
        .verify {
          background: #508ff9;
          color: #fff;
        }
      }
    }
    .zz {
      position: fixed;
      z-index: 2;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: #000000;
      opacity: 0.3;
    }
  }
}
</style>

